<template>
  <div class="migration-step-detail">
    <el-steps :active="currentStep" finish-status="success" align-center>
      <el-step 
        v-for="(step, index) in steps" 
        :key="index"
        :title="step.title"
        :description="step.description"
        :status="getStepStatus(index)"
      >
        <template slot="icon">
          <i 
            v-if="getStepStatus(index) === 'finish'" 
            class="el-icon-check"
            style="color: #67C23A;"
          ></i>
          <i 
            v-else-if="getStepStatus(index) === 'error'" 
            class="el-icon-close"
            style="color: #F56C6C;"
          ></i>
          <i 
            v-else-if="getStepStatus(index) === 'process' && currentStep === index" 
            class="el-icon-loading"
            style="color: #409EFF;"
          ></i>
          <span v-else>{{ index + 1 }}</span>
        </template>
      </el-step>
    </el-steps>
    
    <div class="step-content" v-if="currentStepInfo">
      <el-card class="step-card">
        <div slot="header" class="step-header">
          <span class="step-title">{{ currentStepInfo.title }}</span>
          <el-tag 
            :type="getStepTagType(currentStepInfo.status)"
            size="small"
          >
            {{ getStepStatusText(currentStepInfo.status) }}
          </el-tag>
        </div>
        
        <div class="step-description">
          <p>{{ currentStepInfo.description }}</p>
        </div>
        
        <div class="step-progress" v-if="currentStepInfo.status === 'running'">
          <el-progress 
            :percentage="currentStepInfo.progress || 0" 
            :stroke-width="10"
            text-inside
          ></el-progress>
        </div>
        
        <div class="step-details" v-if="currentStepInfo.details">
          <el-divider></el-divider>
          <h4>详细信息</h4>
          <div class="detail-item" v-for="(detail, key) in currentStepInfo.details" :key="key">
            <span class="detail-label">{{ detail.label }}:</span>
            <span class="detail-value">{{ detail.value }}</span>
          </div>
        </div>
        
        <div class="step-error" v-if="currentStepInfo.error">
          <el-alert
            :title="currentStepInfo.error"
            type="error"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MigrationStepDetail',
  props: {
    task: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      steps: [
        {
          title: '连接源服务器',
          description: '建立与源服务器的连接',
          key: 'connect_source'
        },
        {
          title: '连接目标服务器',
          description: '建立与目标服务器的连接',
          key: 'connect_target'
        },
        {
          title: '验证源环境',
          description: '检查源服务器环境配置',
          key: 'validate_source'
        },
        {
          title: '验证目标环境',
          description: '检查目标服务器环境配置',
          key: 'validate_target'
        },
        {
          title: '准备数据',
          description: '准备迁移所需的数据',
          key: 'prepare_data'
        },
        {
          title: '执行迁移',
          description: '执行数据迁移操作',
          key: 'execute_migration'
        },
        {
          title: '验证结果',
          description: '验证迁移结果的完整性',
          key: 'verify_result'
        },
        {
          title: '清理文件',
          description: '清理迁移过程中产生的临时文件',
          key: 'cleanup'
        }
      ]
    }
  },
  computed: {
    currentStep() {
      // 根据任务进度计算当前步骤
      const progress = this.task.progress || 0;
      if (progress >= 95) return 7;  // 清理文件
      if (progress >= 90) return 6;  // 验证结果
      if (progress >= 80) return 5;  // 执行迁移
      if (progress >= 60) return 4;  // 准备数据
      if (progress >= 40) return 3;  // 验证目标环境
      if (progress >= 30) return 2;  // 验证源环境
      if (progress >= 20) return 1;  // 连接目标服务器
      if (progress >= 10) return 0;  // 连接源服务器
      return 0;
    },
    currentStepInfo() {
      // 根据任务状态和进度返回当前步骤的详细信息
      const step = this.steps[this.currentStep];
      if (!step) return null;
      
      const info = {
        ...step,
        status: this.getStepStatus(this.currentStep),
        progress: this.task.progress || 0
      };
      
      // 添加详细信息
      switch (this.currentStep) {
        case 0: // 连接源服务器
          if (this.task.sourceServerName) {
            info.details = {
              server: { label: '服务器', value: this.task.sourceServerName },
              status: { label: '状态', value: this.getConnectionStatusText(this.task.status) }
            };
          }
          break;
        case 1: // 连接目标服务器
          if (this.task.targetServerName) {
            info.details = {
              server: { label: '服务器', value: this.task.targetServerName },
              status: { label: '状态', value: this.getConnectionStatusText(this.task.status) }
            };
          }
          break;
        case 5: // 执行迁移
          if (this.task.migrationType) {
            info.details = {
              type: { label: '迁移类型', value: this.task.migrationType === 'FULL_SYSTEM' ? '全系统迁移' : '部分目录迁移' },
              source: { label: '源路径', value: this.task.sourcePath || 'N/A' },
              target: { label: '目标路径', value: this.task.targetPath || 'N/A' }
            };
          }
          break;
      }
      
      // 添加错误信息
      if (this.task.errorMessage && this.task.status === 'FAILED') {
        info.error = this.task.errorMessage;
      }
      
      return info;
    }
  },
  methods: {
    getStepStatus(stepIndex) {
      const progress = this.task.progress || 0;
      const status = this.task.status;
      
      // 如果任务已完成，所有步骤都完成
      if (status === 'COMPLETED') {
        return 'finish';
      }
      
      // 如果任务失败，当前步骤为错误，之前的步骤完成，之后的步骤等待
      if (status === 'FAILED') {
        if (stepIndex < this.currentStep) {
          return 'finish';
        } else if (stepIndex === this.currentStep) {
          return 'error';
        } else {
          return 'wait';
        }
      }
      
      // 如果任务正在运行，当前步骤为进行中，之前的步骤完成，之后的步骤等待
      if (status === 'RUNNING') {
        if (stepIndex < this.currentStep) {
          return 'finish';
        } else if (stepIndex === this.currentStep) {
          return 'process';
        } else {
          return 'wait';
        }
      }
      
      // 默认等待状态
      return 'wait';
    },
    
    getStepTagType(status) {
      const typeMap = {
        'wait': '',
        'process': 'primary',
        'finish': 'success',
        'error': 'danger'
      };
      return typeMap[status] || '';
    },
    
    getStepStatusText(status) {
      const statusMap = {
        'wait': '等待',
        'process': '进行中',
        'finish': '完成',
        'error': '失败'
      };
      return statusMap[status] || status;
    },
    
    getConnectionStatusText(status) {
      const statusMap = {
        'PENDING': '待连接',
        'RUNNING': '已连接',
        'COMPLETED': '连接成功',
        'FAILED': '连接失败'
      };
      return statusMap[status] || status;
    }
  }
}
</script>

<style scoped>
.migration-step-detail {
  padding: 20px;
}

.step-content {
  margin-top: 30px;
}

.step-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.step-description {
  margin: 15px 0;
  color: #606266;
  line-height: 1.6;
}

.step-details {
  margin-top: 20px;
}

.step-details h4 {
  margin: 0 0 15px 0;
  color: #303133;
}

.detail-item {
  display: flex;
  margin-bottom: 10px;
  font-size: 14px;
}

.detail-label {
  width: 100px;
  color: #909399;
  margin-right: 15px;
}

.detail-value {
  flex: 1;
  color: #303133;
}

.step-error {
  margin-top: 20px;
}
</style>